<template>
  <div>

    <el-row>
      <el-col :span="2" >
    <el-input v-model="param.rsName"  placeholder="请输入姓名" clearable></el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-select  v-model="param.rsGender"   style="width: 140px" size="small">
          <el-option label="请选择性别" :value="null" disabled selected></el-option>
          <el-option label="全部" ></el-option>
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-col>

      <el-col :span="3" :offset="1">
      <el-input v-model="param.idCard"  placeholder="请输入身份证号" clearable></el-input>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="warning" icon="el-icon-delete" @click="clearInfo">清空条件</el-button>
      </el-col>
      <el-col :span="3" :offset="0">
        <el-button type="primary" icon="el-icon-search" @click="queryRegisterPageInfo">查询病人</el-button>
      </el-col>
    </el-row>

  <el-row>
    <el-col :span="24">
      <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="rsNo"
      label="就诊序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="rsName"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="rsGender"
      label="性别"
      width="120">
      <template slot-scope="scope">
      {{ transGender(scope.row.rsGender) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="rsAge"
      label="年龄"
      width="120">
    </el-table-column>
    <el-table-column
      prop="rsIdCard"
      label="身份证号"
      width="260">
    </el-table-column>
    <el-table-column
      prop="deName"
      label="科室"
      width="120">
    </el-table-column>
    <!-- <el-table-column
      prop="rsDepartmentId"
      v-show="isVisible1"
      label="科室id"
      width="120">
    </el-table-column> -->
    <p v-show=false prop="rsDepartmentId" label="科室id"></p>
    <p v-show=false prop="rsWorkerId" label="医生id"></p>
    <el-table-column
      prop="wkName"
      label="医生"
      width="120">
    </el-table-column>
    <!-- <el-table-column
      prop="rsWorkerId"
      v-show="isVisible"
      label="医生id"
      width="120">
    </el-table-column> -->
    <el-table-column
      prop="rsRegistrationTime"
      label="就诊时间"
      width="300">
    </el-table-column>
    <el-table-column
      label="病例"
      width="120">
      <template slot-scope="scope">
        <el-button @click="viewCasesBtn(scope.row)"  size="small">查看病例</el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="500">
      <template slot-scope="scope">
        <el-button @click="examineBtn(scope.row)" size="small">开检查</el-button>&nbsp;
        <el-button @click="drugsBtn(scope.row)" size="small">开药</el-button>&nbsp;  
        <el-button  :disabled="isSubmitting" @click="caseWritingBtn(scope.row)" size="small">{{ buttonText }}</el-button>&nbsp;
        <el-button @click="behospitalizedBtn(scope.row)" size="small">住院申请</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-col>
  </el-row>

  <el-row>
            <el-col :span="24">
                <!-- 放分页
         layout，表示需要显示的内容
         page-size设置每页多少条-->
                <el-pagination
                        background
                        :page-sizes="[5, 10]"
                        :page-size="pageSize"
                        :current-page="pageNum"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                        @next-click="nextPage"
                        @prev-click="prevPage"
                        @current-change="changePage"
                        @size-change="changeSize">
                </el-pagination>
            </el-col>
        </el-row>

    <!--  检查明细的弹框开始-->
    <el-dialog title="检查明细"  :visible.sync="CheckDetailsForm">
            <template slot-scope='scope'>
                <el-form :model="CheckInfo">
                    <el-form-item label="病人姓名" label-width="80px">
                        <el-input  :disabled="true"  v-model="CheckInfo.rsName" ></el-input>
                    </el-form-item>
                    <el-form-item label="项目名称" label-width="80px">
                      <el-select v-model="selectedItem" placeholder="请选择" @change="onSelectChange">
                        <el-option
                          v-for="item in checkOptions"
                          :key="item.id"
                          :label="item.pjName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                      
                    </el-form-item>
                    <el-form-item label="检查金额" label-width="80px">
                        <el-input  :disabled="true" v-model="selectedItemPrice" ></el-input>
                    </el-form-item>
                    <el-form-item label="开单医生" label-width="80px">
                        <el-input  :disabled="true" v-model="CheckInfo.wkName" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" >
                    <el-button @click.native="CheckDetailsForm = false">取 消</el-button>
                    <el-button type="primary" @click="saveCheckDetails">确 定</el-button>
                </div>
            </template>
        </el-dialog>
        <!--       检查明细的弹框结束-->
  <!--  病例编写的弹框开始-->
  <el-dialog title="病例编写"  :visible.sync="CaseWritingForm">
            <template slot-scope='scope'>
                <el-form :model="CaseInfo">
                    <el-form-item label="病人姓名" label-width="80px">
                        <el-input :disabled="true" v-model="CaseInfo.rsName" ></el-input>
                    </el-form-item>
                    <el-form-item label="填写医生" label-width="80px">
                        <el-input :disabled="true" v-model="CaseInfo.wkName" ></el-input>
                    </el-form-item>
                    <el-form-item label="病情描述" label-width="80px">
                        <el-input type="textarea" v-model="CaseInfo.ciContent" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" >
                    <el-button @click.native="CaseWritingForm = false">取 消</el-button>
                    <el-button type="primary" @click="saveCaseWriting">确 定</el-button>
                </div>
            </template>
        </el-dialog>
        <!--       病例编写的弹框结束-->
<!--  开药明细的弹框开始-->
<el-dialog title="开药明细"  :visible.sync="DrugsDetailsForm">
            <template slot-scope='scope'>
                <el-form :model="DrugsInfo">
                    <el-form-item label="病人姓名" label-width="80px">
                        <el-input  :disabled="true"  v-model="DrugsInfo.rsName" ></el-input>
                    </el-form-item>
                    <el-form-item label="药品名称" label-width="80px">
                      <el-select v-model="dsName" placeholder="请选择" @change="onDrugsChange">
                        <el-option
                          v-for="item in MedicineOptions"
                          :key="item.dsNo"
                          :label="item.dsName"
                          :value="item.dsNo">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="开单医生" label-width="80px">
                        <el-input  :disabled="true" v-model="DrugsInfo.wkName" ></el-input>
                    </el-form-item>
                    <el-form-item label="开药数量" label-width="80px">
                        <el-input   v-model="DrugsInfo.count" ></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="addMedicine">添加</el-button>
                </el-form>
                <el-table
                  :data="DrugsTableData"
                  style="width: 100%">
                  <el-table-column
                    prop="dsNo"
                    label="id"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="dsName"
                    label="药品名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="数量">
                  </el-table-column>
                  <el-table-column
                    prop="dsOutPrice"
                    label="药品售价/盒">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="500">
                    <template slot-scope="scope">
                      <el-button @click="delDrugs(scope.row)" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer" >
                    <el-button @click.native="DrugsDetailsForm = false">取 消</el-button>
                    <el-button type="primary" @click="saveDrugsDetails">确 定</el-button>
                </div>
            </template>
        </el-dialog>
        <!--       开药明细的弹框结束-->
        



<!--  查看病例的弹框开始-->
        <template>
  <el-dialog title="查看病例" :visible.sync="CaseForm">
    <el-form :model="viewCasesOptions" label-width="100px" ref="caseForm">
      <!-- 病人基本信息 -->
      <h3>病人基本信息</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="病人姓名:">
            <p>{{ viewCasesOptions.rsName }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别:">
            <p>{{ viewCasesOptions.rsGender == 1 ? '男' : '女' }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄:">
            <p>{{ viewCasesOptions.rsAge }}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 医生诊断结果 -->
      <h3>医生诊断结果</h3>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="填写医生:">
            <p>{{ viewCasesOptions.wkName }}</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="诊断日期:">
            <p>{{ viewCasesOptions.ciDate }}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="诊断信息:">
        <el-input type="textarea" v-model="viewCasesOptions.ciContent" :rows="3" placeholder="请输入病史"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="CaseForm = false">取 消</el-button>
      <el-button type="primary" @click="saveCaseView">确 定</el-button>
    </div>
  </el-dialog>
 <!--       查看病例的弹框结束-->

        <!--  住院申请的弹框开始-->
        <el-dialog title="住院申请单编写"  :visible.sync="HospitalizationApplicationForm">
          <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
        <template slot-scope='scope'>
            <el-form :model="HospitalizationInfo">
                <el-form-item label="病人姓名" label-width="80px">
                    <el-input :disabled="true" v-model="HospitalizationInfo.rsName" ></el-input>
                </el-form-item>
                <el-form-item label="开单医生" label-width="80px">
                    <el-input :disabled="true" v-model="HospitalizationInfo.wkName" ></el-input>
                </el-form-item>
                <el-form-item label="住院科室" label-width="80px">
                      <el-select v-model="department" placeholder="请选择" @change="ondeDartmentChange">
                        <el-option
                          v-for="item in DepartmentOptions"
                          :key="item.id"
                          :label="item.deName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
                <el-button @click.native="HospitalizationApplicationForm = false">取 消</el-button>
                <el-button type="primary" @click="saveBeHospitalized">确 定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--       查看病例的弹框结束-->

</template>


</div>
</template>

<script>
export default {
  data() {
    return {
      param:{
        rsName:'',    
        rsGender:'',
        idCard:''
      },
      isVisible:false,
      tableData:[],
      DrugsTableData:[],
      CheckDetailsForm: false,
      CaseWritingForm : false,
      DrugsDetailsForm: false,
      CaseForm:false,
      open:false,
      HospitalizationApplicationForm:false,
      CheckInfo:{},
      CaseInfo:{},
      DrugsInfo:{},
      ViewCasesInfo:{},
      checkOptions:{},
      MedicineOptions:{},
      viewCasesOptions:{},
      HospitalizationInfo:{},
      DepartmentOptions:{},
      drugsInfoName:'',
      // 当前选中的项
      selectedItem: '',
      // 选中项的金额
      selectedItemPrice: '',
      rsDepartmentId:'',
      deId:'',
      dsNo:'',
      dsName:'',
      dsOutprice:'',
      department:'',
      isSubmitting: false,
      buttonText:'病例编写',
      pageSize:5,
      pageNum:1,
      total:0,
    }
  },

  methods: {
    saveCaseView(){
      let param = {}
      param.ciContent = this.viewCasesOptions.ciContent
      param.rsNo = this.viewCasesOptions.rsNo
      this.$axios.post('api/outpatientDoctor/updateCaseInfo',param)
        .then(resp =>{
          console.log(resp.data);
        })
      this.viewCasesOptions=[]
      this.CaseForm = false

    },
    delDrugs(row){
      this.DrugsTableData.forEach(e=>{
              this.DrugsTableData = this.DrugsTableData.filter(e => e.dsNo !== row.dsNo);
          })
    },
    onDrugsChange(dsNo){
      const MedOption = this.MedicineOptions.find(MedicineOption => MedicineOption.dsNo === dsNo);
      if (MedOption) {
        this.dsNo = MedOption.dsNo;
        this.dsName = MedOption.dsName;
        this.dsOutPrice = MedOption.dsOutPrice;
      }
    },

    ondeDartmentChange(id){
      const DepOption = this.DepartmentOptions.find(DepartmentOption => DepartmentOption.id === id);
      if (DepOption) {
        this.deId = DepOption.id;
      }
    },


  
    addMedicine(){
    let DrugsInfo2 = {
    dsNo: this.dsNo,
    dsName: this.dsName,
    rsNo: this.DrugsInfo.rsNo,
    rsWorkerId: this.DrugsInfo.rsWorkerId,
    count: this.DrugsInfo.count,
    dsOutPrice: this.dsOutPrice
};
// 检查 DrugsTableData 中是否已存在相同的 dsNo
let existingItem = this.DrugsTableData.find(item => item.dsNo === DrugsInfo2.dsNo);

if (existingItem) {
    // 如果存在相同的 dsNo，增加 count
    let newCount = parseFloat(DrugsInfo2.count); 
    
    // 验证 newCount 是否为有效的数字
    if (!isNaN(newCount)) {
        existingItem.count = parseFloat(existingItem.count) + newCount;
    } else {
        console.warn('Invalid count value:', DrugsInfo2.count);
    }
} else {
    // 如果不存在相同的 dsNo，将新条目添加到 DrugsTableData
    this.DrugsTableData.push(DrugsInfo2);}

// 重置 DrugsInfo.count
this.DrugsInfo.count = '';

      // let DrugsInfo2={}
      // DrugsInfo2.dsNo = this.dsNo;
      // DrugsInfo2.dsName = this.dsName
      // DrugsInfo2.rsNo = this.DrugsInfo.rsNo
      // DrugsInfo2.rsWorkerId = this.DrugsInfo.rsWorkerId
      // DrugsInfo2.count = this.DrugsInfo.count
      // DrugsInfo2.dsOutPrice = this.dsOutPrice
      // this.DrugsTableData.push(DrugsInfo2);
      // this.DrugsInfo.count=''
     
    },
    onSelectChange(id){
      const selectedOption = this.checkOptions.find(checkOption => checkOption.id === id);
      if (selectedOption) {
        this.selectedItemPrice = selectedOption.pjPrice;
        this.rsDepartmentId = selectedOption.rsDepartmentId;
      }
    },
    queryDepartmentInfo(){
      this.$axios.get('api/outpatientDoctor/queryDepartment')
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.DepartmentOptions = resp.data.data
          }
        })
    },
    queryViewCaseInfo(){
      this.$axios.get('api/outpatientDoctor/queryViewCaseByrsNo/'+this.ViewCasesInfo.rsNo)
        .then(resp =>{
          console.log(resp.data);
           if(resp.data.code == 200){
            if(resp.data.data !=null){
                this.CaseForm = true
              this.viewCasesOptions = resp.data.data
            }else if(resp.data.data ==null){

            // this.CaseForm = false;
            this.$message({
            message: '该患者未找到相关病例信息',
            type: 'warning'
          });
           }
           }
        })
    },
  
    queryExamineInfo(){
      this.$axios.get('api/outpatientDoctor/queryExamine')
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.checkOptions = resp.data.data
          }
        })
    },
    queryMedicineInfo(){
      this.$axios.get('api/outpatientDoctor/queryMedicine')
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.MedicineOptions = resp.data.data
          }
        })
    },
    saveBeHospitalized(){
      let param ={}
      param.iaDepartmentId = this.deId
      param.iaWorkerId = this.HospitalizationInfo.rsWorkerId
      param.iaCaseId = this.HospitalizationInfo.rsNo
      this.$axios.post('api/outpatientDoctor/addHospitalization',param)
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.HospitalizationApplicationForm = false
            this.department=''
          }
        })
    },
    saveDrugsDetails(){
      this.$axios.post('api/outpatientDoctor/addMedicineOrder',this.DrugsTableData)
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.DrugsDetailsForm = false
            this.DrugsTableData=[]
          }
        })

    },
    saveCheckDetails(){ 
      let Check={};
      Check.rsNo = this.CheckInfo.rsNo;
      Check.rsWorkerId = this.CheckInfo.rsWorkerId;
      Check.rsDepartmentId = this.CheckInfo.rsDepartmentId;
      Check.ckProjectName = this.selectedItem;
      Check.ckProjectPrice = this.selectedItemPrice;
      this.$axios.post('api/outpatientDoctor/addCheckDetails',Check)
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            
            this.CheckDetailsForm = false
            this.$message({
            message: '病例编写成功',
            type: 'success'
          });
          }
        })

    },
    saveCaseWriting(){
      let Case={};
      Case.rsNo = this.CaseInfo.rsNo;
      Case.rsWorkerId = this.CaseInfo.rsWorkerId;
      Case.ciContent = this.CaseInfo.ciContent;
      Case.rsDepartmentId = this.CaseInfo.rsDepartmentId;
      
      this.$axios.post('api/outpatientDoctor/addCaseWriting',Case)
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.CaseInfo.ciContent=''
            this.CaseWritingForm = false
          }
        })
    },
    caseWritingBtn(row){
      this.isSubmitting = true;
      this.buttonText = '提交中...';
      this.CaseInfo = row;
      this.CaseWritingForm = true
    },
    examineBtn(row){
      this.queryExamineInfo()
      this.CheckInfo = row;
      this.CheckDetailsForm = true
    },
    drugsBtn(row){
      this.queryMedicineInfo()
      this.DrugsInfo = row;
      this.DrugsDetailsForm = true
    },
    viewCasesBtn(row){
      this.ViewCasesInfo = row;
      this.queryViewCaseInfo();
    },
    behospitalizedBtn(row){
      this.queryDepartmentInfo()
      this.HospitalizationInfo = row;
      this.HospitalizationApplicationForm = true
    },
    transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: '男',
            0: '女'
          }
          return genderList[genderCode]
        },
    // queryRegisterInfo(){
    //   let pageData={};
    //   pageData.pageNum = this.pageNum
    //   pageData.pageSize = this.pageSize
    //   pageData.param = this.param
    //   this.$axios.post('api/outpatientDoctor/queryRegisterList',this.param)
    //     .then(resp =>{
    //       console.log(resp.data);
    //       if(resp.data.code == 200){
    //         this.tableData = resp.data.data
    //       }
    //     })
    // },
    queryRegisterPageInfo(){
                    this.pageNum = 1
                    this.queryRegisterPage();
                },
    queryRegisterPage(){
      let pageData={};
      pageData.pageNum = this.pageNum
      pageData.pageSize = this.pageSize
      pageData.param = this.param
      this.$axios.post('api/outpatientDoctor/queryRegisterListPage',pageData)
        .then(resp =>{
          console.log(resp.data);
          if(resp.data.code == 200){
            this.tableData = resp.data.data.list
            this.total = resp.data.data.total
          }
        })
    },
    clearInfo(){
      this.param = {}
    },
    nextPage(val){
        this.pageNum = val
        this.queryRegisterPage();
    },
    prevPage(val){
        this.pageNum = val
        this.queryRegisterPage();
    },
    changePage(val){
        this.pageNum = val
        this.queryRegisterPage();
    },
    changeSize(val){
        this.pageNum = 1
        this.pageSize = val;
        this.queryRegisterPage();
    },

  },
  created(){
    this.queryRegisterPage()
    
  }
}
</script>

<style scoped>
</style>